<template>
    <div id="big">
        <div class="d1" v-for="(item, index) in jobData">
            <p>{{ item.name }}</p>
            <button class="d2" v-for="(item1, index1) in item.childrenList" @click="clickBtn(item1.name)">{{ item1.name
            }}</button>
        </div>
</div>
</template>

<script lang="ts" setup>
import bus from "@/bus/bus";
import { ref, reactive } from "vue";
import { categoryList } from "../../api/productList"

let clickBtn = (name: string) => {
    bus.emit("attrBtn", name);
}

let d2color = ref('white');
let jobData = reactive([]);

categoryList().then(res => {
    console.log(res)
    res.forEach(item => {
        jobData.push(item)
    })
})
//数据
// let jobData = [
//     {
//         "id": 1,
//         "name": "热门",
//         "childrenList": [
//             {
//                 "id": 1001,
//                 "name": "全部"
//             },
//             {
//                 "id": 1002,
//                 "name": "潮兼职"
//             }
//         ]
//     },
//     {
//         "id": 2,
//         "name": "简单易做",
//         "childrenList": [
//             {
//                 "id": 2001,
//                 "name": "传单派发"
//             },
//             {
//                 "id": 2002,
//                 "name": "问卷调查"
//             },
//             {
//                 "id": 2003,
//                 "name": "充场"
//             }
//         ]
//     },
//     {
//         "id": 3,
//         "name": "超市/零售",
//         "childrenList": [
//             {
//                 "id": 3001,
//                 "name": "促销导购"
//             },
//             {
//                 "id": 3002,
//                 "name": "收银员"
//             },
//             {
//                 "id": 3003,
//                 "name": "理货员"
//             },
//             {
//                 "id": 3004,
//                 "name": "营业员"
//             },
//             {
//                 "id": 3005,
//                 "name": "店员"
//             },
//             {
//                 "id": 3006,
//                 "name": "收银主管"
//             },
//             {
//                 "id": 3007,
//                 "name": "店长/卖场经理"
//             },
//             {
//                 "id": 3008,
//                 "name": "促销主管/督导"
//             },
//             {
//                 "id": 3009,
//                 "name": "品类管理"
//             },
//             {
//                 "id": 3010,
//                 "name": "采购员/助理"
//             },
//             {
//                 "id": 3011,
//                 "name": "质量管理"
//             },
//             {
//                 "id": 3012,
//                 "name": "停车管理员"
//             }
//         ]
//     }
// ]
</script>

<style lang='scss' scoped>
#big {
    width: 100%;
    height: 75%;
    background-color: white;
}

.d1 {
    width: 100%;
    border-top: 1px solid #e9e8e8;
    padding-top: 10px;
}

.d1 p {
    color: gray;
    margin-left: 3%;
}

.d2 {
    width: 21%;
    margin-left: 3%;
    background: v-bind(d2color);
    line-height: 35px;
    text-align: center;
    border: 1px solid #e9e8e8;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 15px;
}
</style>